<template>
  <div class="page-mask">
    <div class="page-mask-inner shinning">
      <div class="s1"></div>
      <div>
        <div class="s2"></div>
        <div class="s2"></div>
        <div class="s2"></div>
        <div class="s2"></div>
        <div class="s2"></div>
        <div class="s2"></div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
}
</script>

<style scoped lang="less">
.page-mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: white;
  z-index: 20000;
  .s1 {
    height: 60px;
    background-image: url("./documents-page-mask-1.png");
    background-position: center;
    background-size: 80% 10px;
    background-repeat: no-repeat;
  }
  .s2 {
    height: 150px;
    background-image: url("./documents-page-mask-2.png");
    background-position: center;
    background-size: 80% 100px;
    background-repeat: no-repeat;
  }
}

.shinning {
  animation: shinning 1.5s infinite alternate;
}

@keyframes shinning {
  0%   { opacity: 1; }
  100% { opacity: 0.3; }
}

</style>
